<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!--  引入vue.js  因为Element UI 依赖vue -->
    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>

    <link rel="stylesheet" href="../static/elementui/theme-chalk/index.css"/>
    <script src="../static/elementui/index.js"></script>
    <style type="text/css">
        #all {
            width: 1290px;
            margin: 0 auto;
            margin-top: 15px;
        }

        #search_bar {
            height: 200px;
            background-color: #eeeeee;
            text-align: center;
            line-height: 80px;
            margin-top: 10px;
        }

        .star {
            color: red;
        }

        .div_out {
            margin-top: 15px;
        }

        .div_inner {
            margin: 10px;
            margin-left: 20px;
            margin-right: 20px;
            position: relative;
            font-size: 14px;
            display: inline-block;
        }

        .content {
            width: 500px;
            height: 300px;
            border: 1px solid;
        }

        .span {
            display: inline-block;
            margin-left: 20px;
        }
    </style>
</head>


<body>
<div id="all">

    <div id="table">
        <el-card class="box-card">
            <div class="span">
                <span class="el-icon-phone">手机号</span>
                <div class="div_inner">
                    <el-input v-model="telephone" id="telephone" placeholder="请输入关键字"></el-input>
                </div>
                <span class="el-icon-user-solid">登录名</span>
                <div class="div_inner">
                    <el-input v-model="loginName" placeholder="请输入关键字"></el-input>
                </div>
                <el-button type="primary" round icon="el-icon-search" @click="getAdminList">查询</el-button>
                <el-button round icon=el-icon-refresh @click="reset">重置</el-button>
                <span class="el-icon-s-custom" style="margin-left: 20px;">角色</span>
                <div class="div_inner">
                    <template>
                        <el-select v-model="roleList.id" clearable @change="selectTrigger(roleList.id)"
                                   placeholder="请选择">
                            <el-option v-for="item in roleList" :key="item.value" :label="item.roleName"
                                       :value="item.id">
                            </el-option>
                        </el-select>
                    </template>
                </div>
                <div style="margin-bottom: 10px;">
                    <el-button type="primary" icon="el-icon-document-add" @click="newAdminFormVisible = true">添加
                    </el-button>
                    <el-button>批量导入<i class="el-icon-upload el-icon--right"></i></el-button>
                    <input type="file"
                           accept="application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                           name="file" id="file" @change="change($event)"
                           style="margin-left: -9.5%;width: 100px;opacity:0">
                </div>
            </div>
            <template>
                <el-table :data="tableData" height="390" border style="width: 100%">
                    <el-table-column type="index" label="序号" align="center" width="60">
                    </el-table-column>
                    <el-table-column prop="adminName" label="用户名" align="center" width="140">
                    </el-table-column>
                    <el-table-column prop="loginName" label="登录名" width="140">
                    </el-table-column>
                    <el-table-column prop="roleBean.roleName" label="角色" align="center" width="140">
                    </el-table-column>
                    <el-table-column prop="telephone" label="手机号" width="140">
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱" width="200">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" align="center" width="90">
                        <template slot-scope="scope">
                            <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#DCDFE6"
                                       :active-value=0
                                       :inactive-value=1
                                       @change="changeSwitch($event,scope.row,scope.$index)">
                                <!--$event 当前状态 1/0  scope.row：当前行的数据  scope.$index：当前行的索引-->
                            </el-switch>
                        </template>

                    </el-table-column>
                    <el-table-column fixed="right" align="center" label="操作" width="300">
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="info" size="mini" icon="el-icon-view">
                                查看
                            </el-button>
                            <el-button type="success" size="mini" icon="el-icon-edit" @click="editorShow(scope.row)">
                                编辑
                            </el-button>
                            <el-button @click="del(scope.row,scope.$index)" type="danger" icon="el-icon-delete"
                                       size="small">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <!-- 分页组件 -->
            <div class="block" style="margin-top: 20px;">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                               :page-sizes="[6, 12, 20]"
                               :page-size="6"
                               layout="total, sizes, prev, pager, next, jumper"
                               :total=total>
                </el-pagination>
                <!--   :current-page="currentPage" 默认显示页面-->
            </div>
        </el-card>

        <!-- 编辑管理员弹窗 -->
        <el-dialog title="编辑管理员信息" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="管理员名称" :label-width="formLabelWidth">
                    <el-input v-model="form.adminName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="管理员登录名" :label-width="formLabelWidth">
                    <el-input v-model="form.loginName" @blur="checkName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off" show-password
                              placeholder="不填写则为原密码  *（修改登录名则必须重置密码）"></el-input>
                </el-form-item>
                <el-form-item label="角色选择" :label-width="formLabelWidth">
                    <el-select v-model="form.roleId"
                               placeholder="请选择">
                        <el-option v-for="item in roleList" :key="item.value" :label="item.roleName"
                                   :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateAdminMsg">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 新增管理员弹窗 -->
        <el-dialog title="新增管理员" :visible.sync="newAdminFormVisible" @open="open">
            <el-form :model="newAdminForm">
                <el-form-item label="管理员名称" :label-width="formLabelWidth">
                    <el-input v-model="newAdminForm.adminName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="管理员登录名" :label-width="formLabelWidth">
                    <el-input v-model="newAdminForm.loginName" @blur="checkName2" autocomplete="off"
                              placeholder="*注意登录名作为账号不能重复*"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="newAdminForm.password" autocomplete="off" show-password
                              placeholder="*初始密码默认请设为123456*"></el-input>
                </el-form-item>
                <el-form-item label="角色选择" :label-width="formLabelWidth">
                    <el-select v-model="newAdminForm.roleId"
                               placeholder="请选择">
                        <el-option v-for="item in roleList" :key="item.value" :label="item.roleName"
                                   :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="newAdminFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveAdmin">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</div>
</body>
<script>
    let vm = new Vue({
        el: "#all",
        data: {
            pageSize: 6,
            pageNum: 1,
            total: 0,
            tableData: [],
            loginName: '',
            telephone: "",
            roleList: [],
            roleId: "",
            dialogFormVisible: false,
            newAdminFormVisible: false,
            form: {
                adminName: '',
                loginName: '',
                password: '',
                roleId: '',
                adminId: '',
            },
            newAdminForm: {
                adminName: '',
                loginName: '',
                password: '',
                roleId: '',
            },
            formLabelWidth: '120px',
        },
        created() {
            this.getAdminList();
            this.getRoleList();
        },
        methods: {
            //
            handleClick(row) {
                console.log(row);
            },
            //监听每页条数改变
            handleSizeChange(val) {
                this.pageSize = val;
                this.getAdminList();
                console.log(`每页 ${val} 条`);
            },
            //监听当前页改变
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val;
                this.getAdminList();
            },
            getRoleList() {
                axios.get("../role/findAll")
                    .then(res => {
                        // console.log(res.data)
                        this.roleList = res.data.data;
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            getAdminList() {
                axios.get('../admin/findList', {
                    params: {
                        pageSize: this.pageSize,
                        pageNum: this.pageNum,
                        loginName: this.loginName,
                        telephone: this.telephone,
                        roleId: this.roleId,
                    }
                })
                    .then(res => {//此处一定要用 箭头函数  不然this 就不是this
                        // console.log(res.data.data.data);
                        this.total = res.data.data.total;
                        this.tableData = res.data.data.data;
                        //测试代码
                        // let map =  res.data.data.data[0]
                        // this.tableData = map
                        // console.log(map);
                        // let arr = new Array(1);
                        // arr[0] = map
                        // this.tableData = arr
                        // console.log(this.tableData);
                    })
                    .catch(error => {
                        console.log(error);
                    });

            },
            changeSwitch(status, data, index) {

                axios({
                    method: 'PUT',
                    url: '../admin/updateMsg',
                    // headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    params: {
                        status: status,
                        id: data.id,
                    },

                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '已成功更改此管理员状态',
                            type: 'success'
                        })
                    } else {
                        this.$message({
                            message: '系统繁忙',
                            type: 'error'
                        })
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            selectTrigger(val) {
                this.roleId = val;
                this.getAdminList();
            },
            reset() {
                this.loginName = ''
                this.telephone = ''
                this.getAdminList();
            },
            del(row, index) { //删除
                this.$confirm('此操作将永久删除该员工, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method: 'DELETE',
                        url: '../admin/del/' + row.id,
                    }).then(res => {
                        if (res.data.code === 200) {
                            //删除当前选中行
                            // console.log(vm.tableData);
                            vm.tableData.splice(index, 1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                        } else {
                            this.$message({
                                message: res.data.message
                            })
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //弹出窗体展示数据使用的方法
            editorShow(row) {
                this.form.password = '';
                this.form.adminName = row.adminName
                this.form.loginName = row.loginName
                this.form.roleId = row.roleBean.id
                this.form.adminId = row.id
                this.dialogFormVisible = true;
            },
            checkName() {
                axios.get("../admin/check", {
                    params: {
                        loginName: this.form.loginName,
                        id: this.form.adminId
                    }
                })
                    .then(res => {
                        if (res.data.code !== 200) {
                            this.form.loginName = ''
                            this.$message({
                                type: 'error',
                                message: res.data.message
                            });
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            checkName2() {
                axios.get("../admin/check", {
                    params: {
                        loginName: this.newAdminForm.loginName,
                    }
                })
                    .then(res => {
                        if (res.data.code !== 200) {
                            this.newAdminForm.loginName = ''
                            this.$message({
                                type: 'error',
                                message: res.data.message
                            });
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },
            updateAdminMsg() {
                axios({
                    method: 'PUT',
                    url: '../admin/updateMsg',
                    // headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    params: {
                        adminName: this.form.adminName,
                        loginName: this.form.loginName,
                        id: this.form.adminId,
                        password: this.form.password,
                        roleId: this.form.roleId
                    },

                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        //关闭窗口
                        this.getAdminList()
                        this.dialogFormVisible = false
                    } else {
                        this.$message({
                            message: '系统繁忙',
                            type: 'error'
                        })
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            //新增窗口打开时候清空默认值
            open() {
                this.newAdminForm.adminName = ''
                this.newAdminForm.loginName = ''
                this.newAdminForm.password = ''
                this.newAdminForm.roleId = ''
            },
            saveAdmin() {
                //开启弹窗
                this.newAdminFormVisible = true
                let adminName = this.newAdminForm.adminName
                let loginName = this.newAdminForm.loginName
                let password = this.newAdminForm.password
                let roleId = this.newAdminForm.roleId
                if (adminName === '' || loginName === '' || password === '' || roleId === '') {
                    this.$message({
                        message: '必填项不能为空',
                        type: 'info'
                    })
                    return
                }
                axios({
                    method: 'POST',
                    url: '../admin/saveAdmin',
                    params: {
                        adminName: adminName,
                        loginName: loginName,
                        password: password,
                        roleId: roleId
                    },

                }).then(res => {
                    if (res.data.code === 200) {
                        this.$message({
                            message: res.data.message,
                            type: 'success'
                        })
                        //关闭窗口
                        this.getAdminList()
                        this.newAdminFormVisible = false
                    } else {
                        this.$message({
                            message: '系统繁忙',
                            type: 'error'
                        })
                    }
                }).catch(error => {
                    console.log(error);
                });
            },
            change(e) {
                let file = e.target.files[0];
                let param = new FormData(); //创建form对象
                param.append('file', file);//通过append向form对象添加数据
                console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
                let config = {
                    headers: {'Content-Type': 'multipart/form-data'}
                }; //添加请求头
                axios.post('../files/parsingExcel', param, config)
                    .then(res => {
                        if (res.data.code === 200) {
                            this.$message({
                                message: res.data.message,
                                type: 'success'
                            })
                            //关闭窗口
                            this.getAdminList()
                        } else {
                            this.$message({
                                message: res.data.message,
                                type: 'error'
                            })
                        }
                    }).catch(error => {
                    console.log(error);
                });
            }
        }
    })
</script>

</html>